<template>
  <div class="conten">
    <div class="conten_search">
      <el-input
        class="conten_search_input"
        type="text"
        :prefix-icon="Search"
      ></el-input>
      <el-button size="large" class="conten_search_button">
        搜索
      </el-button>

      <div class="conten_select">
        <span>发布状态&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <el-select
          v-model="value"
          class="m-2"
          placeholder="全部"
          size="default"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>

      <div class="conten_picker">
        <span>发布时间&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          size="default"
        />
      </div>
    </div>

    <div class="operate">
      <div class="one"><span>内容</span></div>
      <div class="two"><span>发布时间</span></div>
      <div class="three"><span>价格</span></div>
      <div class="four"><span>数据</span></div>
      <div class="five"><span>销售/销售额</span></div>
      <div class="five"><span>状态</span></div>
      <div class="five"><span>操作</span></div>
    </div>
    <div class="conten_data">
      <span>无更多内容</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'goods_manager',
})
</script>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const value = ref('')
const value1 = ref('')

const options = [
  {
    value: '全部',
    label: '全部',
  },
  {
    value: '已发布',
    label: '已发布',
  },
  {
    value: '未发布',
    label: '未发布',
  },
  {
    value: '审核中',
    label: '审核中',
  },
  {
    value: '审核未通过',
    label: '审核未通过',
  },
  {
    value: '仅主页可见',
    label: '仅主页可见',
  },
]
</script>

<style scoped lang="less">
.conten {
  .conten_search {
    padding-right: 16px;
    display: flex;
    .conten_search_input {
      background-color: #ccc;
      width: 270px;
    }
    .conten_search_button {
      margin-left: 10px;
    }
  }

  .conten_select {
    margin: 0px 16px 0px 30px;
    // margin-left: 30px;
    text-align: center;

    ::v-deep .el-input__wrapper {
      width: 100px;
    }
  }

  .conten_picker {
    ::v-deep .el-date-editor {
      width: 238px;
    }
  }

  .operate {
    display: flex;
    margin-top: 16px;
    background-color: #f2eded;
    .one {
      width: 410px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
    .two {
      width: 150px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
    .three {
      width: 134px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
    .four {
      width: 133px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
    .five {
      width: 133px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
  }
  .conten_data {
    height: 56px;
    line-height: 56px;
    text-align: center;
    width: 100%;
    color: #ccc;
    font-size: 14px;
  }
}
</style>
